<template>
    <!-- 只有一个根节点 -->
    <div>
        <div>
            <el-form :inline="true" :model="termFreq" class="demo-form-inline">
              <el-form-item>
                <el-input v-model="termFreq.tag" placeholder="请输入标签名"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="query()">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="save()">新增</el-button>
              </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table :data="tableData" style="width: 100%" stripe border>
                <el-table-column prop="date" label="日期" width="180" align="center">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180" align="center">
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, 
scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- <div>
            
            分页区域
            
        </div> -->
    </div>
</template>
<script>
    export default {
        data() {          
            return {
                // 功能区域
                termFreq:{
                    tag:""
                },
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        },
        methods: {
            // 修改按钮调用的方法
            handleEdit(index, row) {
                console.log(index, row);
            },
            // 删除按钮调用的方法
            handleDelete(index, row) {
                console.log(index, row);
            },
            // 查询
            query(){
                
            },
            // 新增
            save(){
                
            }
            
        }
    }
</script>
<style>
</style>